<div id="player">
  <div class="controls">
    <button id="play-pause" class="btn" (click)="toggle()">
      <i class="fa" [ngClass]="{'fa-play':!isPlaying,'fa-pause': isPlaying}"></i>
    </button>
    <button type="button" class="btn" (click)="restart()">
      <i class="fa fa-repeat" aria-hidden="true"></i>
    </button>
    <input id="position-slider" type="range" [(ngModel)]="percent" [attr.max]="max" (mouseup)="runFrom()">
    <span id="position">{{ position }}</span>
    <span>/</span>
    <span id="duration">{{ duration }}</span>
    <span id="user" style="padding-left: 20px" *ngIf="replay.user">{{"user"| translate}} : {{replay.user}}</span>
    <span id="asset" style="padding-left: 20px" *ngIf="replay.asset">{{"asset"| translate}} : {{replay.asset}}</span>
    <span id="system_user" style="padding-left: 20px" *ngIf="replay.system_user">{{"system user"| translate}} : {{replay.system_user}}</span>
    <span id="date_start" style="padding-left: 20px" *ngIf="replay.date_start">{{"start time"| translate}} : {{starttime}} </span>
    <span id="date_start" style="padding-left: 30px" *ngIf="replay.download_url"><a type="button" [href]="replay.download_url">{{"download"| translate}}</a></span>

  </div>
  <div id="display" (click)="toggle()">
    <div class="notification-container">
      <div class="seek-notification">
        <p>
          Seek in progress...
          <button id="cancel-seek" class="btn" (click)="cancelSeek($event)">Cancel</button>
        </p>
      </div>
    </div>
    <div id="screen"></div>
  </div>
</div>
